<template>
  <GridPage title="申请加入企业组织">
    <n-alert title="提示" type="info" class="mt-12" v-show="!canApply">
      您已加入一个企业，或当前有待审核的加入申请。
    </n-alert>
    <n-card class="mt-12" title="加入企业">
      <n-grid :cols="6">
        <n-gi :span="4">
          <n-select
            v-model:value="selectedCompany"
            :options="companyOps"
            :render-label="renderLabel"
            :render-tag="renderTag"
            filterable
            :disabled="!canApply"
            placeholder="通过输入进行企业搜索筛选"
          >
            <template #arrow>
              <i class="i-fe:search"></i>
            </template>
          </n-select>
        </n-gi>
        <n-gi :span="2" class="ml-20">
          <n-button type="primary" :disabled="!canApply" @click="apply">申请加入</n-button>
        </n-gi>
      </n-grid>
    </n-card>
    <n-card class="mt-12" title="申请情况">
      <n-data-table
        :columns="columns"
        :data="companyApplications"
        :bordered="false"
        max-height="350px"
      />
    </n-card>
  </GridPage>
</template>

<script setup>
import { GridPage } from '@/components'
import companyApi from '@/api/company'
import { useRecruiterStore } from '@/store/modules/recruiter'
import { NAvatar, NTag, NButton } from 'naive-ui'
const recruiterStore = useRecruiterStore()
//选中公司
const selectedCompany = ref()

//公司选项，通过服务器获取
const companyOps = ref([])

//已提交的申请列表
const companyApplications = ref([])

const applyState = [
  { label: '待审核', type: 'warning' },
  { label: '已通过 ', type: 'success' },
  { label: '未通过 ', type: 'error' },
  { label: '已撤销', type: 'error' },
]

//申请表格列数据定义
const columns = ref([
  {
    title: '申请id',
    align: 'center',
    key: 'id',
  },
  {
    title: '公司名称',
    align: 'center',
    key: 'company_name',
  },
  {
    title: '申请时间',
    align: 'center',
    key: 'apply_time',
    sorter: (a, b) => a.apply_time.localeCompare(b.apply_time),
  },
  {
    title: '申请状态',
    align: 'center',
    key: 'state',
    render(row) {
      const o = applyState[row.state]
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
          },
          type: o.type,
        },
        {
          default: () => o.label,
        }
      )
    },
    filterOptions: [
      {
        label: '待审核',
        value: 0,
      },
      {
        label: '已通过',
        value: 1,
      },
      {
        label: '未通过',
        value: 2,
      },
      {
        label: '已撤销',
        value: 3,
      },
    ],
    filter(value, row) {
      return row.state === value
    },
  },
  {
    title: '操作',
    align: 'center',
    key: 'actions',
    render(row) {
      return h(
        NButton,
        {
          type: 'primary',
          size: 'small',
          disabled: row.state !== 0,
          onClick: () => cancelApply(row),
        },
        { default: () => '撤销' }
      )
    },
  },
])

//企业选择框内容和标签渲染
const renderLabel = (option) => {
  return h(
    'div',
    {
      style: {
        display: 'flex',
        alignItems: 'center',
      },
    },
    [
      h(NAvatar, {
        src: option.company_icon,
        round: true,
        size: 'small',
      }),
      h(
        'div',
        {
          style: {
            marginLeft: '10px',
          },
        },
        [option.company_name]
      ),
    ]
  )
}
const renderTag = ({ option }) => {
  return h(
    'div',
    {
      style: {
        display: 'flex',
        alignItems: 'center',
      },
    },
    [
      h(NAvatar, {
        src: option.company_icon,
        round: true,
        size: 24,
        style: {
          marginRight: '12px',
        },
      }),
      option.company_name,
    ]
  )
}

async function apply() {
  await companyApi.applyJoinCompany({
    applicant_id: recruiterStore.recruiter.recruiter_id,
    company_id: selectedCompany.value,
  })
  $message.success('申请成功')
  const { data } = await companyApi.getCompanyApplicantJoinApplications(
    recruiterStore.recruiter.recruiter_id
  )
  companyApplications.value = data
}

//是否可以提交申请
const canApply = ref(false)

watch(
  companyApplications,
  () => {
    // 没有加入企业 并且 没有处于申请中状态的申请
    const ret =
      companyApplications.value.find((e) => e.state === 0) === undefined &&
      recruiterStore.recruiter?.company_id === null
    canApply.value = ret
    // 如果当前可以申请，且没有获取企业选项列表，则进行数据获取
    if (ret && companyOps.value.length === 0) {
      getCompanyOps()
    }
  },
  {
    deep: true,
  }
)

//获取公司列表数据
async function getCompanyOps() {
  const { data } = await companyApi.getCompanySelection()
  companyOps.value = data
  companyOps.value.forEach((e) => {
    e.value = e.company_id
    e.label = e.company_name
  })
}

async function cancelApply(row) {
  await companyApi.cancelJoinCompany(row.id)
  $message.success('撤销成功')
  row.state = 3
}

onMounted(async () => {
  // await recruiterStore.getRecruiter()
  const owner_id = recruiterStore.recruiter.recruiter_id
  const { data } = await companyApi.hasOwnerCompany(owner_id)
  if (data) {
    //注册过企业，不可提交其他加入申请
    canApply.value = false
  } else {
    let res = await companyApi.getCompanyApplicantJoinApplications(
      recruiterStore.recruiter.recruiter_id
    )
    companyApplications.value = res.data
  }
})
</script>
